<template>
  <div class="container">
    <el-tabs type="border-card">
      <el-tab-pane label="工作负责人变动">
        <div class="button">
          <el-tooltip
            class="item"
            effect="dark"
            :disabled="!changeInfo.disabled"
            :content="changeInfo.content"
            placement="right"
          >
            <span>
              <el-button
                size="mini"
                class="el-icon-plus"
                v-if="changeInfo.showBtn"
                :disabled="changeInfo.disabled"
                @click="toChange('工作负责人变更', 'directorChange')"
              >
                新增</el-button
              >
            </span>
          </el-tooltip>
        </div>
        <baseTable
          class="table"
          :tableSetting="changeConfig1"
          ref="table1"
        ></baseTable>
      </el-tab-pane>
      <el-tab-pane label="工作票延期">
        <div class="button">
          <el-tooltip
            class="item"
            effect="dark"
            :disabled="!changeInfo.disabled"
            :content="changeInfo.content"
            placement="right"
          >
            <span>
              <el-button
                size="mini"
                class="el-icon-plus"
                v-if="changeInfo.showBtn"
                :disabled="changeInfo.disabled"
                @click="toChange('工作票延期', 'ticketDelay')"
              >
                新增</el-button
              >
            </span>
          </el-tooltip>
        </div>
        <baseTable
          class="table"
          :tableSetting="changeConfig2"
          ref="table2"
        ></baseTable
      ></el-tab-pane>
      <el-tab-pane label="工作间断">
        <div class="button">
          <el-tooltip
            class="item"
            effect="dark"
            :disabled="!changeInfo.disabled"
            :content="changeInfo.content"
            placement="right"
          >
            <span>
              <el-button
                size="mini"
                class="el-icon-plus"
                v-if="changeInfo.showBtn"
                :disabled="changeInfo.disabled"
                @click="toChange('工作间断', 'workInterrupt')"
              >
                新增</el-button
              >
            </span>
          </el-tooltip>
        </div>
        <baseTable
          class="table"
          :tableSetting="changeConfig3"
          ref="table3"
        ></baseTable
      ></el-tab-pane>
      <el-tab-pane label="增加工作内容">
        <div class="button">
          <el-tooltip
            class="item"
            effect="dark"
            :disabled="!changeInfo.disabled"
            :content="changeInfo.content"
            placement="right"
          >
            <span>
              <el-button
                size="mini"
                class="el-icon-plus"
                v-if="changeInfo.showBtn"
                :disabled="changeInfo.disabled"
                @click="toChange('增加工作内容', 'addWorkContent')"
              >
                新增</el-button
              >
            </span>
          </el-tooltip>
        </div>
        <baseTable
          class="table"
          :tableSetting="changeConfig4"
          ref="table4"
        ></baseTable
      ></el-tab-pane>
      <el-tab-pane label="工作班成员变动">
        <div class="button">
          <el-tooltip
            class="item"
            effect="dark"
            :disabled="!changeInfo.disabled"
            :content="changeInfo.content"
            placement="right"
          >
            <span>
              <el-button
                size="mini"
                class="el-icon-plus"
                v-if="changeInfo.showBtn"
                :disabled="changeInfo.disabled"
                @click="toChange('工作班成员变动', 'memberChange')"
              >
                新增</el-button
              >
            </span>
          </el-tooltip>
        </div>
        <baseTable
          class="table"
          :tableSetting="changeConfig5"
          ref="table5"
        ></baseTable
      ></el-tab-pane>
      <el-tab-pane label="部分安全措施变动">
        <div class="button">
          <el-tooltip
            class="item"
            effect="dark"
            :disabled="!changeInfo.disabled"
            :content="changeInfo.content"
            placement="right"
          >
            <span>
              <el-button
                size="mini"
                class="el-icon-plus"
                v-if="changeInfo.showBtn"
                :disabled="changeInfo.disabled"
                @click="
                  toChange('部分安全措施变动', 'securityArrangementChange')
                "
              >
                新增</el-button
              >
            </span>
          </el-tooltip>
        </div>
        <baseTable
          class="table"
          :tableSetting="changeConfig6"
          ref="table6"
        ></baseTable
      ></el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  props: {
    // 自定义类型，用来在init函数对changeConfig进行修改控制
    customType: {
      type: String,
      default: ''
    },
    changeData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    changeInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      changeConfig1: {
        indexShow: true, // 序号显示
        height: 400,
        column: [
          {
            label: "原工作负责人",
            prop: "formerDirectorName",
            required: true,
            showTooltip: false,
          },
          {
            label: "新工作负责人",
            prop: "newDirectorName",
            required: true,
            showTooltip: false,
          },
          {
            label: "工作许可人",
            prop: "permitName",
            required: true,
            showTooltip: false,
          },
          {
            label: "交接时间",
            prop: "changeTime",
            required: true,
            showTooltip: false,
          },
          {
            label: "工作票签发人",
            prop: "singName",
            required: true,
            showTooltip: false,
          },
        ],
        data: this.changeData.ticketChangeDirectorList,
        rowClick: (row) => {
          let obj = { id: row.changeId, type: "directorChange" };
          this.gotoDetails(obj);
        },
      },
      changeConfig2: {
        indexShow: true, // 序号显示
        height: 400,
        column: [
          {
            label: "有效期延长至",
            prop: "delayTime",
            required: true,
            showTooltip: false,
          },
          {
            label: "工作负责人",
            prop: "directorName",
            required: true,
            showTooltip: false,
          },
          {
            label: "值班负责人",
            prop: "dutyPersonName",
            required: true,
            showTooltip: false,
          },
        ],
        data: this.changeData.ticketChangeDelayList,
        rowClick: (row) => {
          let obj = { id: row.changeId, type: "ticketDelay" };
          this.gotoDetails(obj);
        },
      },
      changeConfig3: {
        indexShow: true, // 序号显示
        height: 400,
        column: [
          {
            label: "工作间断时间",
            prop: "interruptTime",
            required: true,
            showTooltip: false,
          },
          {
            label: "工作负责人",
            prop: "directorNameInterrupt",
            required: true,
            showTooltip: false,
          },
          {
            label: "工作许可人",
            prop: "permitNameInterrupt",
            required: true,
            showTooltip: false,
          },
          {
            label: "工作开始时间",
            prop: "startTime",
            required: true,
            showTooltip: false,
          },
          {
            label: "开始工作许可人",
            prop: "permitNameStart",
            required: true,
            showTooltip: false,
          },
          {
            label: "开始工作负责人",
            prop: "directorNameStart",
            required: true,
            showTooltip: false,
          },
        ],
        data: this.changeData.ticketChangeInterruptList,
        rowClick: (row) => {
          let obj = { id: row.changeId, type: "workInterrupt" };
          this.gotoDetails(obj);
        },
      },
      changeConfig4: {
        indexShow: true, // 序号显示
        height: 400,
        column: [
          {
            label: "不变更安全措施下增加的工作项目",
            prop: "content",
            required: true,
            showTooltip: false,
          },
          {
            label: "工作负责人",
            prop: "directorName",
            required: true,
            showTooltip: false,
          },
          {
            label: "工作许可人",
            prop: "permitName",
            required: true,
            showTooltip: false,
          },
        ],
        data: this.changeData.ticketChangeContentList,
        rowClick: (row) => {
          let obj = { id: row.changeId, type: "addWorkContent" };
          this.gotoDetails(obj);
        },
      },
      changeConfig5: {
        indexShow: true, // 序号显示
        height: 400,
        column: [
          {
            label: "工作负责人",
            prop: "directorName",
            required: true,
            showTooltip: false,
          },
          {
            label: "工作许可人",
            prop: "permitName",
            required: true,
            showTooltip: false,
          },
          {
            label: "增加工作班成员",
            prop: "addMemberName",
            required: true,
            showTooltip: false,
          },
          {
            label: "减少工作班成员",
            prop: "decreaseMemberName",
            required: true,
            showTooltip: false,
          },
          {
            label: "变更时间",
            prop: "changeTime",
            required: true,
            showTooltip: false,
          },
        ],
        data: this.changeData.ticketChangeMemberList,
        rowClick: (row) => {
          let obj = { id: row.changeId, type: "memberChange" };
          this.gotoDetails(obj);
        },
      },
      changeConfig6: {
        indexShow: true, // 序号显示
        height: 400,
        column: [
          {
            label: "工作负责人",
            prop: "directorName",
            required: true,
            showTooltip: false,
          },
          {
            label: "工作许可人",
            prop: "permitName",
            required: true,
            showTooltip: false,
          },
          {
            label: "部分安全措施变动",
            prop: "securityArrangement",
            required: true,
            showTooltip: false,
          },
          {
            label: "变更时间",
            prop: "changeTime",
            required: true,
            showTooltip: false,
          },
        ],
        data: this.changeData.ticketChangeSecurityArrangementList,
        rowClick: (row) => {
          let obj = { id: row.changeId, type: "securityArrangementChange" };
          this.gotoDetails(obj);
        },
      },
    };
  },
  created () {
    this.init()
  },
  methods: {
    // 初始化
    init() {
      this.modifyConfig(this.customType)
    },
    // 修改config数据
    modifyConfig(customType) {
      // zsj工作票，值班责任人——>工作许可人
      if(['ZsjBidSectionFirst'].includes(customType)) {
        this.changeConfig2.column.forEach((item, index) => {
          if(item.prop === 'dutyPersonName') {
            let insertItem = {
              label: "工作许可人",
              prop: "permitName",
              required: true,
              showTooltip: false,
            }
            this.changeConfig2.column.splice(index, 1, insertItem)
          }
        })
      }
    },
    // 变更
    toChange(label, value) {
      let data = {
        id: this.changeInfo.id,
        ticketType: this.changeInfo.ticketType,
        type$: label,
        type: value,
      };
      let { href } = this.$router.resolve({
        name: "workTicketChangeDetails",
        query: {
          formData: data ? JSON.stringify(data) : "",
          pageType: "changeTicket",
        },
      });
      window.open(href, "_blank");
    },
    // 详情页面
    gotoDetails(data) {
      let { href } = this.$router.resolve({
        name: "workTicketChangeDetails",
        query: {
          formData: data ? JSON.stringify(data) : "",
          pageType: "details",
        },
      });
      window.open(href, "_blank");
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  .button {
    text-align: left;
  }
  /deep/ .el-tabs--border-card {
    border-radius: 4px 4px 0 0;
  }
  /deep/ .el-tabs__item:after {
    content: "";
    position: absolute;
    left: -1px;
    top: 8px;
    height: 26px;
    width: 1px;
    background-color: #dcdfe6;
  }
}
</style>